<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>QCloud VIDEO UGC UPLOAD SDK</title>
    {load href="__PLUG__/semantic/semantic.min.css"/}
    <style type="text/css">

    </style>
</head>
<body>

<div id="main-area" style="padding: 15px">

    <h3>腾讯云点播上传
        <div style="float: right">
            <a class="ui teal tiny submit button" href="/backend/tencent/vodlist.html">返回列表</a>
        </div>
    </h3>
    <form ref="vcExample">
        <input type="file" style="display:none;" ref="vcExampleVideo" @change="setVcExampleVideoName()" />
        <input type="file" style="display:none;" ref="vcExampleCover" @change="setVcExampleCoverName()" />
    </form>

    <table class="ui celled table">
        <tr>
            <td width="130" style="text-align: center;">
                <a href="javascript:void(0);" class="ui tiny button" @click="vcExampleAddVideo">选择视频</a>
            </td>
            <td>{{vcExampleVideoName|| '请选择mp4'}}</td>
        </tr>
        <tr>
            <td width="130" style="text-align: center;">
                <a href="javascript:void(0);" class="ui tiny button" @click="vcExampleAddCover">选择封面</a>
            </td>
            <td>{{vcExampleCoverName|| '请选择图片'}}</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <a href="javascript:void(0);" class="ui tiny teal button" @click="vcExampleAddUpload">开始上传</a>
            </td>
        </tr>
    </table>

    <!--<form ref="cExample">-->
        <!--<input type="file" style="display:none;" ref="cExampleCover" @change="cExampleUpload" />-->
    <!--</form>-->
    <!--<div class="row form-group form-group-sm" style="padding:10px;">-->
        <!--<h4>示例3：修改封面</h4>-->
        <!--<label class="col-sm-1" style="padding: 0;">fileId：</label>-->
        <!--<div class="col-sm-4">-->
            <!--<input name="fileId" class="form-control" v-model="cExampleFileId"></input>-->
        <!--</div>-->
        <!--<div class="col-sm-4">-->
            <!--<a href="javascript:void(0);" class="btn btn-default" @click="cExampleAddCover">修改封面</a>-->
        <!--</div>-->
    <!--</div>-->
    <div id="resultBox">
        <!-- 上传信息组件	 -->
        <div class="ui message" v-for="info in uploaderInfos" style="font-size: 12px;">
            <div v-if="info.videoInfo">
                视频名称：{{info.videoInfo.name + '.' + info.videoInfo.type}}；
                上传进度：{{Math.floor(info.progress * 100) + '%'}}；
                fileId：{{info.fileId}}；
                上传结果：{{info.isVideoUploadCancel ? '已取消' : info.isVideoUploadSuccess ? '上传成功' : '上传中'}}；
                <br>
                地址：{{info.videoUrl}}；
                <a href="javascript:void(0);" class="cancel-upload" v-if="!info.isVideoUploadSuccess && !info.isVideoUploadCancel" @click="info.cancel()">取消上传</a><br>
            </div>
            <div v-if="info.coverInfo">
                封面名称：{{info.coverInfo.name}}；
                上传进度：{{Math.floor(info.coverProgress * 100) + '%'}}；
                上传结果：{{info.isCoverUploadSuccess ? '上传成功' : '上传中'}}；
                <br>
                地址：{{info.coverUrl}}；
                <br>
            </div>
        </div>
    </div>

</div>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>

<script type="text/javascript">

    ;(function () {
        // function getSignature() {
        //     return axios.post('https://demo.vod2.myqcloud.com/ugc-upload/', JSON.stringify({
        //         "Action": "GetUgcUploadSign"
        //     })).then(function (response) {
        //         return response.data.data.sign
        //     })
        // }
        function getSignature() {
            return '{$sign}';
        }
        // 保持到数据库
        function saveVod(title, videoUrl, coverUrl, fileId) {
            axios.post('{:url("vodUpload")}', {
                title: title,
                videoUrl: videoUrl,
                coverUrl: coverUrl,
                fileId: fileId
            }).then(function (response) {
                console.log(response)
            })
        }

        var app = new Vue({
            el: '#main-area',
            data: {
                uploaderInfos: [],
                vcExampleVideoName: '',
                vcExampleCoverName: '',
                cExampleFileId: '',
            },
            created: function () {
                this.tcVod = new TcVod.default({
                    getSignature: getSignature
                })
            },
            methods: {
                setVcExampleVideoName: function () {
                    this.vcExampleVideoName = this.$refs.vcExampleVideo.files[0].name;
                },
                setVcExampleCoverName: function () {
                    this.vcExampleCoverName = this.$refs.vcExampleCover.files[0].name;
                },
                vcExampleAddVideo: function () {
                    this.$refs.vcExampleVideo.click()
                },
                vcExampleAddCover: function () {
                    this.$refs.vcExampleCover.click()
                },
                /*
                  上传视频和封面
                */
                vcExampleAddUpload: function () {
                    var self = this;

                    var mediaFile = this.$refs.vcExampleVideo.files[0];
                    var coverFile = this.$refs.vcExampleCover.files[0];

                    if(typeof mediaFile == 'undefined') {
                        alert('请选择视频');
                        return;
                    }
                    if(typeof coverFile == 'undefined') {
                        alert('请选择封面');
                        return;
                    }

                    var uploader = this.tcVod.upload({
                        mediaFile: mediaFile,
                        coverFile: coverFile,
                    })
                    uploader.on('media_progress', function(info) {
                        uploaderInfo.progress = info.percent;
                    })
                    uploader.on('media_upload', function(info) {
                        uploaderInfo.isVideoUploadSuccess = true;
                    })
                    uploader.on('cover_progress', function(info) {
                        uploaderInfo.coverProgress = info.percent;
                    })
                    uploader.on('cover_upload', function(info) {
                        uploaderInfo.isCoverUploadSuccess = true;
                    })
                    console.log(uploader, 'uploader')

                    var uploaderInfo = {
                        videoInfo: uploader.videoInfo,
                        coverInfo: uploader.coverInfo,
                        isVideoUploadSuccess: false,
                        isVideoUploadCancel: false,
                        isCoverUploadSuccess: false,
                        progress: 0,
                        coverProgress: 0,
                        fileId: '',
                        videoUrl: '',
                        coverUrl: '',
                        cancel: function () {
                            uploaderInfo.isVideoUploadCancel = true;
                            uploader.cancel()
                        },
                    }

                    this.uploaderInfos.push(uploaderInfo)

                    uploader.done().then(function (doneResult) {
                        console.log('doneResult', doneResult)

                        uploaderInfo.fileId = doneResult.fileId;

                        uploaderInfo.coverUrl = doneResult.cover.url;
                        uploaderInfo.videoUrl = doneResult.video.url;
                        saveVod(
                            uploaderInfo.videoInfo.name + '.' + uploaderInfo.videoInfo.type,
                            doneResult.video.url,
                            doneResult.cover.url,
                            doneResult.fileId
                        );
                        console.log('dd')
                        console.log(  uploaderInfo.videoInfo.name + '.' + uploaderInfo.videoInfo.type,
                            doneResult.video.url,
                            doneResult.cover.url)
                        self.$refs.vcExample.reset();
                        self.vcExampleVideoName = ''
                        self.vcExampleCoverName = ''

                    })
                },

                // cExample 添加封面
                // cExampleAddCover: function() {
                //     this.$refs.cExampleCover.click()
                // },
                // cExample 上传过程 修改封面
                // cExampleUpload: function() {
                //
                //     if(this.cExampleFileId == '') {
                //         alert('缺少fileId')
                //         return;
                //     }
                //
                //     var self = this;
                //
                //     var coverFile = this.$refs.cExampleCover.files[0];
                //
                //     var uploader = this.tcVod.upload({
                //         fileId: this.cExampleFileId,
                //         coverFile: coverFile,
                //     })
                //     uploader.on('cover_progress', function(info) {
                //         uploaderInfo.coverProgress = info.percent;
                //     })
                //     uploader.on('cover_upload', function(info) {
                //         uploaderInfo.isCoverUploadSuccess = true;
                //     })
                //     console.log(uploader, 'uploader')
                //
                //     var uploaderInfo = {
                //         coverInfo: uploader.coverInfo,
                //         isCoverUploadSuccess: false,
                //         coverProgress: 0,
                //         coverUrl: '',
                //         cancel: function () {
                //             uploader.cancel()
                //         },
                //     }
                //
                //     this.uploaderInfos.push(uploaderInfo)
                //
                //     uploader.done().then(function (doneResult) {
                //         console.log('doneResult', doneResult)
                //
                //         uploaderInfo.coverUrl = doneResult.cover.url;
                //
                //         self.$refs.cExample.reset();
                //     })
                // },
            },
        })
    })();

</script>

</body>

</html>